import React from "react";
import "./index.scss";
import classNames from "classnames";
import { MenuListType } from "../header";
import { inject, observer } from "mobx-react";
import { RootStore } from "src/store/root-store";
import { IChannel } from "src/interfaces";

interface AllChannelType {
  list: IChannel[];
  rootStore?: RootStore;
  scrollToCenter?: Function;
  setIsOpened: Function;
}

const Index = ({
  list,
  rootStore,
  scrollToCenter,
  setIsOpened,
}: AllChannelType) => {
  const { curChannelInfo, setCurChannelInfo, setCurIndex } =
    rootStore as RootStore;
  return (
    <ul className="menu-list">
      {list?.map((item: IChannel, index: number) => {
        return (
          <li
            className={classNames("menu-item ellipsis", {
              "common-active": item.id === curChannelInfo.id,
            })}
            key={item.id}
            onClick={async () => {
              setCurIndex(index);
              await setCurChannelInfo({
                id: item.id,
                type: item.type,
                name: item.name,
              });
              await setIsOpened(false);
              scrollToCenter && (await scrollToCenter());
            }}
          >
            {item.name}
          </li>
        );
      })}
    </ul>
  );
};

export const ChannelList = observer(inject("rootStore")(Index));
